<template>
  <div class="list">
    <van-divider>热卖</van-divider>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="(item, index) in goods"
        :tag="index + 1 + ''"
        :key="item.id"
        :num="item.amount"
        :price="item.price.toFixed(2)"
        :desc="item.desc"
        :title="item.name"
        :thumb="item.coverImage | imgUrl"
        @click="toDetail(item.id)"
      ></van-card>
    </van-list>
  </div>
</template>

<script>
import { loadGoods } from "../services/goods";
export default {
  data() {
    return {
      goods: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
    onLoad() {
      this.page++;
      if (this.page >= 5) {
        this.finished = true;
        return;
      } else {
        loadGoods(this.page).then((res) => {
          this.goods.push(...res.data);
          this.loading = false;
        });
      }
    },
  },
};
</script>

<style>
</style>